<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成果管理系统 - 登录/注册</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        /* 添加一些基本样式用于显示错误信息 */
        .form-message {
            color: red;
            font-size: 0.9em;
            margin-top: 10px;
            min-height: 1.2em; /* 占位防止跳动 */
            text-align: center;
        }
        /* 假设 style.css 中有 .right-panel-active 的样式 */
    </style>
</head>
<body class="login-page-active"> <!-- 这个类名可能用于控制整体样式或初始状态 -->
    <div class="container" id="container">
        <!-- Sign Up Panel (注册) -->
        <div class="container__form container--signup">
            <!-- **** 修改注册表单 **** -->
            <form action="#" class="form" id="registerForm">  <!-- 修改了 id -->
                <h2 class="form__title">注 册</h2>
                <input type="text" placeholder="用户名" class="input" id="regUsername" required /> <!-- 添加 id 和 required -->
                <input type="email" placeholder="邮箱" class="input" id="regEmail" required />   <!-- 添加 id 和 required -->
                <input type="password" placeholder="密码" class="input" id="regPassword" required /> <!-- 添加 id 和 required -->
                <input type="password" placeholder="确认密码" class="input" id="regConfirmPassword" required /> <!-- **** 添加确认密码 **** -->
                <p id="registerMessage" class="form-message"></p> <!-- **** 添加错误消息区域 **** -->
                <button type="submit" class="btn">注 册</button> <!-- 明确 type="submit" -->
            </form>
        </div>

        <!-- Sign In Panel (登录) -->
        <div class="container__form container--signin">
            <form action="#" class="form" id="loginForm">
                <h2 class="form__title">登 录</h2>
                <input type="text" placeholder="用户名" class="input" id="username" name="username" required />
                <input type="password" placeholder="密码" class="input" id="password" name="password" required />
                <a href="#" class="link">忘记密码了?</a> <!-- 功能待实现 -->
                <p id="loginMessage" class="form-message"></p> <!-- 用于登录的错误消息 -->
                <button type="submit" class="btn">登 录</button>
            </form>
        </div>

        <!-- Overlay -->
        <div class="container__overlay">
            <div class="overlay">
                <div class="overlay__panel overlay--left">
                    <!-- 这个按钮用于从注册视图切换回登录视图 -->
                    <button class="btn" id="signIn">已有账号？ 登 录</button>
                </div>
                <div class="overlay__panel overlay--right">
                     <!-- 这个按钮用于从登录视图切换到注册视图 -->
                    <button class="btn" id="signUp">没有账号？ 注 册</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 优先加载模拟数据 (如果需要) -->
    <script src="js/data.js"></script>
    <!-- 加载登录逻辑 (可能需要修改以协调) -->
    <script src="js/login.js"></script>

    <!-- **** 修改并添加 JavaScript 逻辑 **** -->
    <script>
        const signInBtn = document.getElementById("signIn");
        const signUpBtn = document.getElementById("signUp");
        const container = document.getElementById("container");

        // --- 注册表单元素 ---
        const registerForm = document.getElementById("registerForm"); // 使用新 id
        const regUsernameInput = document.getElementById('regUsername');
        const regEmailInput = document.getElementById('regEmail'); // 获取邮箱输入
        const regPasswordInput = document.getElementById('regPassword');
        const regConfirmPasswordInput = document.getElementById('regConfirmPassword');
        const registerMessageDiv = document.getElementById('registerMessage'); // 获取注册消息区域

        // --- 登录表单元素 (如果 login.js 没有处理, 在这里获取) ---
        // const loginForm = document.getElementById("loginForm");
        // const usernameInput = document.getElementById('username');
        // const passwordInput = document.getElementById('password');
        // const loginMessageDiv = document.getElementById('loginMessage');

        // --- 面板切换逻辑 (保持不变) ---
        if (signInBtn && signUpBtn && container) {
            signInBtn.addEventListener("click", () => {
                container.classList.remove("right-panel-active");
                clearMessages(); // 切换时清空消息
            });

            signUpBtn.addEventListener("click", () => {
                container.classList.add("right-panel-active");
                clearMessages(); // 切换时清空消息
            });
        }

        // --- 清空消息函数 ---
        function clearMessages() {
            if(registerMessageDiv) registerMessageDiv.textContent = '';
            const loginMessageDiv = document.getElementById('loginMessage'); // 确保获取到登录消息元素
            if(loginMessageDiv) loginMessageDiv.textContent = '';
        }


        // --- !! 新增：注册表单提交处理 !! ---
               // --- !! 新增：注册表单提交处理 !! ---
        if (registerForm) {
            registerForm.addEventListener("submit", function(event) {
                event.preventDefault(); // 阻止表单默认提交

                const username = regUsernameInput.value.trim();
                const email = regEmailInput.value.trim(); // 获取邮箱，虽然 data.addUser 目前没用，但保留
                const password = regPasswordInput.value;
                const confirmPassword = regConfirmPasswordInput.value;
                registerMessageDiv.textContent = ''; // 清空之前的错误信息
                registerMessageDiv.style.color = 'red'; // 默认错误消息为红色

                // 1. 基本的前端验证
                if (!username || !email || !password || !confirmPassword) {
                    registerMessageDiv.textContent = '所有字段均为必填项！';
                    return;
                }

                // 简单的邮箱格式验证 (可选，浏览器 type="email" 已提供基础验证)
                // if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                //    registerMessageDiv.textContent = '请输入有效的邮箱地址！';
                //    return;
                // }

                if (password.length < 3) { // 添加一个简单的密码长度示例
                    registerMessageDiv.textContent = '密码长度至少需要3位！';
                    regPasswordInput.focus();
                    return;
                }

                if (password !== confirmPassword) {
                    registerMessageDiv.textContent = '两次输入的密码不一致！';
                    regConfirmPasswordInput.focus();
                    return;
                }

                // 2. 调用 data.js 中的 addUser 函数尝试注册
                console.log('尝试注册用户:', username);

                // ****  核心修改在这里 ****
                // 假设新注册用户默认角色为 'normal'
                const registrationResult = data.addUser(username, password, 'normal');

                if (registrationResult.success) {
                    // 注册成功
                    registerMessageDiv.textContent = registrationResult.message;
                    registerMessageDiv.style.color = 'green'; // 成功消息用绿色
                    console.log('用户注册成功:', username);

                    // 延迟一小段时间，让用户看到成功消息，然后切换
                    setTimeout(() => {
                        alert(`注册成功！用户名: ${username}\n现在将切换回登录界面。`); // 可以保留 alert 或去掉
                        registerForm.reset(); // 清空表单
                        container.classList.remove("right-panel-active"); // 切换回登录
                        clearMessages(); // 清空消息区域
                    }, 1500); // 延迟1.5秒

                } else {
                    // 注册失败 (例如，用户名已存在)
                    registerMessageDiv.textContent = registrationResult.message;
                    console.error('用户注册失败:', registrationResult.message);
                    regUsernameInput.focus(); // 让用户方便修改用户名
                }
                // **** 修改结束 ****
            });
        }

        // 注意: 登录表单 (loginForm) 的提交逻辑应该在 js/login.js 文件中处理
        // 确保 js/login.js 正确加载并执行


        // 注意: 登录表单 (loginForm) 的提交逻辑应该在 js/login.js 文件中处理
        // 如果 js/login.js 不存在或未处理，你需要在这里或该文件中添加类似 loginForm.addEventListener('submit', ...) 的代码

    </script>
</body>
</html>